<template>
  <div class="app-container">
    <div>推广注册用户总数：<span>{{ totalUser }}人</span></div>
    <el-row class="mb8" type="flex" justify="space-between">
      <el-col>推广注册用户新增趋势</el-col>
      <el-col style="display: flex;align-items: center;justify-content: flex-end">
        <el-tag
            v-for="(item, index) in userTagItems"
            :key="item.label"
            :effect="userTagIndex === index ? 'dark' : 'plain'"
            style="margin-right: 10px"
            @click="handleUserClick(index)">
          {{ item.label }}
        </el-tag>
        <el-date-picker
            v-model="dateRange1"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            size="mini"
            @change="(evt)=>handleDateChange(evt, 'user')">
        </el-date-picker>
      </el-col>
    </el-row>
    <div>
      <line-chart :chart-data="lineChartData" v-if="chartLoading" />
    </div>
    <el-row class="mb8" type="flex" justify="space-between">
      <el-col style="'font-weight': 'bold'">推广注册用户</el-col>
      <el-col style="display: flex;align-items: center;justify-content: flex-end">
        <el-tag
            v-for="(item, index) in tableTagItems"
            :key="item.label"
            :effect="tableTagIndex === index ? 'dark' : 'plain'"
            style="margin-right: 10px"
            @click="handleClick(index)">
          {{ item.label }}
        </el-tag>
        <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            size="mini"
            @change="(evt)=>handleDateChange(evt, 'table')">
        </el-date-picker>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="编号" prop="id" align="center" width="120" sortable />
      <el-table-column label="用户ID" align="center" prop="userId" :show-overflow-tooltip="true" />
      <el-table-column label="用户名" align="center" prop="userName" :show-overflow-tooltip="true" />
      <el-table-column label="消费金额(元)" align="center" prop="consumerMoney" width="160" sortable />
      <el-table-column label="累计收益(元)" prop="totalEmployee" align="center" width="160" sortable />
      <el-table-column label="上级用户" align="center" prop="firstLevelUser" />
      <el-table-column label="上上级用户" align="center" prop="secondLevelUser" />
      <el-table-column label="注册方式" prop="loginType" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.loginType === 1 ? '微信' : scope.row.loginType === 2 ? 'qq' : '手机号' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" prop="registerTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="init"
    />
  </div>
</template>
<script>
  import { getRegisterUserList, getUserSpreadStatistics } from '@/api/shuiyin/shuiyin.js';
  import LineChart from '../../dashboard/LineChart'
//   const lineChartData = {
//   newVisitis: {
//     expectedData: [100, 120, 161, 134, 105, 160, 165],
//     actualData: [120, 82, 91, 154, 162, 140, 145]
//   },
//   messages: {
//     expectedData: [200, 192, 120, 144, 160, 130, 140],
//     actualData: [180, 160, 151, 106, 145, 150, 130]
//   },
//   purchases: {
//     expectedData: [80, 100, 121, 104, 105, 90, 100],
//     actualData: [120, 90, 100, 138, 142, 130, 130]
//   },
//   shoppings: {
//     expectedData: [130, 140, 141, 142, 145, 150, 160],
//     actualData: [120, 82, 91, 154, 162, 140, 130]
//   }
// }
  export default {
    components: {
      LineChart
    },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          type: 0,
          beginTime: undefined,
          endTime: undefined,
        },
        userQueryParams: {
          type: 0,
          beginTime: undefined,
          endTime: undefined,
        },
        totalUser: 0,
        className: '',
        loading: false,
        list: [],
        total: 0,
        lineChartData: {},
        chartLoading: false,
        tableTagItems: [
          {
            label: '今日',
            value: '0'
          },
          {
            label: '昨日',
            value: '1'
          },
          {
            label: '7日',
            value: '2'
          },
          {
            label: '30日',
            value: '3'
          }
        ],
        tableTagIndex: 0,
        dateRange: [],
        userTagItems: [
          {
            label: '今日',
            value: '0'
          },
          {
            label: '昨日',
            value: '1'
          },
          {
            label: '7日',
            value: '2'
          },
          {
            label: '30日',
            value: '3'
          }
        ],
        dateRange1: [],
        userTagIndex: 0,
      }
    },
    created() {
      this.init();
      this.initChart();
    },
    methods: {
      init() {
        this.loading = true;
        getRegisterUserList(this.queryParams).then(response => {
          this.loading = false;
          this.list = response.rows;
          this.total = response.total;
        })
      },
      initChart() {
        this.chartLoading = false;
        getUserSpreadStatistics(this.userQueryParams).then(response => {
          this.totalUser = response.data.totalUserNum;
          const spreadAddUserData = response.data.spreadAddUserData;
          const xArray = spreadAddUserData.map(item1 => {
            return item1.time
          })
          const yArray = spreadAddUserData.map(item2 => {
            return item2.userNum
          })
          this.lineChartData = {
            xData: xArray,
            yData: yArray
          }
          this.chartLoading = true;
        })
      },
      handleClick(index) {
        this.tableTagIndex = index;
        this.queryParams.type = index;
        this.init();
      },
      handleUserClick(index) {
        this.userTagIndex = index;
        this.userQueryParams.type = index;
        this.initChart();
      },
      handleDateChange(evt, type) {
        if (type === 'table') {
          this.queryParams.beginTime = evt ? evt[0] : undefined;
          this.queryParams.endTime = evt ? evt[1] : undefined;
          this.init();
        } else if (type === 'user') {
          this.userQueryParams.beginTime = evt ? evt[0] : undefined;
          this.userQueryParams.endTime = evt ? evt[1] : undefined;
          this.initChart();
        }
      }
    }
  }
</script>